﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒计时效果</title>
<link rel="stylesheet" type="text/css" href="demo.css"/>
<link rel="stylesheet" type="text/css" href="../../../css/article_base.css" />
<script type="text/javascript" src="demo.js"></script>
</head>
<body>


<p class="title">DEMO演示 倒计时效果 学习Date对象的应用</p>


<div id="timer">
	<div id="box1">
		<span>请输入:</span>
		<input id="input1" type="text"/>
		<span>年</span> 
		<input id="input2" type="text"/>
		<span>月</span>
		<input id="input3" type="text"/> 
		<span>日</span>
	</div>
	<div id="box2"></div>
	<div id="box3">现在距离 - <span id="output1">2012年12月22日</span> - 还剩：</div>
	<div id="box4">
		<p id="day">0000</p>
		<p id="hour">00</p>
		<p id="min">00</p>
		<p id="sec">00</p>
	</div>
</div>


<p class="title">js代码</p>
<pre>
//倒计时效果
window.onload = function(){
	var oInput1 = document.getElementById('input1');		
	var oInput2 = document.getElementById('input2');	
	var oInput3 = document.getElementById('input3');	 
	var oBox2 = document.getElementById('box2');
	var oOutput1 = document.getElementById('output1');	
	var oDay = document.getElementById('day');
	var oHour = document.getElementById('hour');
	var oMin = document.getElementById('min');
	var oSec = document.getElementById('sec');
	var Ftime = null;
	
	oBox2.onclick = function(){
		org1 = oInput1.value                     //每次点击 保存按下按钮后的原始输入值
		org2 = oInput2.value
		org3 = oInput3.value
		updateTime();                            //每次点击执行一次函数 得到最新的时间戳差值 这句必须写在点击事件下
		Ftime = setInterval(updateTime,1000);    //每次点击重新开启定时器 后续的过期时间会跳出程序停止定时器 后续的重新输入input value也会停掉定时器	         
	}
	
	function updateTime(){
		var oDateEnd = new Date();                        	//new两个Date对象出来，这个用于设置为输入框内的年月日及0分秒等
		var oDateNow = new Date();				//这个永远是当前的时间
		oDateEnd.setFullYear(parseInt(oInput1.value));    	//通过setxxxx方法，设置新new出来的oDateEnd对象的年月日等
		oDateEnd.setMonth(parseInt(oInput2.value) - 1);   	//记得设置月的时候 减一。
		oDateEnd.setDate(parseInt(oInput3.value));
		oDateEnd.setHours(0);
		oDateEnd.setMinutes(0);
		oDateEnd.setSeconds(0);	
		iRemain = (oDateEnd.getTime() - oDateNow.getTime())/1000;   //通过.getTime() 得到输入时间和当前时间的毫秒数，相减除1000就是差多少秒 
		
		if(iRemain &lt 0){                         	//如果输入的时间早于现在的时间 那就全0 并停掉定时器 并打印 然后迅速跳出函数
			oDay.innerHTML = setDigit(0,4);
			oHour.innerHTML = setDigit(0,2);
			oMin.innerHTML = setDigit(0,2);
			oSec.innerHTML = setDigit(0,2);
			clearInterval(Ftime);             	//注意这里必须要停掉定时器，否则函数从头执行 到了alert之后再return出去 过1000函数又从头执行到return
			alert('已过期时间');
			return;
		}
		
		var iDay = parseInt(iRemain/86400);  	//通过以下的方法 将相差的秒数，算成多少天 小时 分钟 秒
		iRemain %= 86400;
		var iHour = parseInt(iRemain/3600);
		iRemain %= 3600;
		var iMin = parseInt(iRemain/60);
		iRemain %= 60;
		var iSec = parseInt(iRemain); 
	
		oDay.innerHTML = setDigit(iDay,4);
		oHour.innerHTML = setDigit(iHour,2);
		oMin.innerHTML = setDigit(iMin,2);
		oSec.innerHTML = setDigit(iSec,2);
		oOutput1.innerHTML = oInput1.value + "年" + oInput2.value + "月" + oInput3.value + "日"
		
		if(oInput1.value!=org1||oInput2.value!=org2||oInput3.value!=org3){ //如果输入值和按按钮之前的值不同了 也就是重新输入值的时候
			oDay.innerHTML = setDigit(0,4);        
			oHour.innerHTML = setDigit(0,2);
			oMin.innerHTML = setDigit(0,2);
			oSec.innerHTML = setDigit(0,2);
			clearInterval(Ftime);                //那就全0 并停掉定时器 然后迅速跳出函数 必须再按按钮才能重新开启定时器
			return;
		}
	}	 
	 
	function setDigit(num,n){
		var str = '' + num ;   		//等同于'num'（这样写如果传入num本身就是字符串就会报错）,所以还是''+比较好。 
		while(str.length &lt n){   	//n就是要用前面的0补成几位数 例如要补成3位 n就是3。
			str = '0' + str;   	//往前面填零
		}
		return str;
	}

}
</pre>
 

<p class="title">html代码</p>
<pre>
&ltdiv id="timer">
	&ltdiv id="box1">
		&ltspan>请输入:&lt/span>
		&ltinput id="input1" type="text"/>
		&ltspan>年&lt/span> 
		&ltinput id="input2" type="text"/>
		&ltspan>月&lt/span>
		&ltinput id="input3" type="text"/> 
		&ltspan>日&lt/span>
	&lt/div>
	&ltdiv id="box2">&lt/div>
	&ltdiv id="box3">现在距离 - &ltspan id="output1">2012年12月22日&lt/span> - 还剩：&lt/div>
	&ltdiv id="box4">
		&ltp id="day">0000&lt/p>
		&ltp id="hour">00&lt/p>
		&ltp id="min">00&lt/p>
		&ltp id="sec">00&lt/p>
	&lt/div>
&lt/div>
</pre>


<p class="title">css代码</p>
<pre>
*{
	margin:0px;
	padding:0px;
}
#timer{
	width:600px;
	height:660px;
	background:url(img/bg.jpg) no-repeat;
	margin:20px 0 0 100px;
}
#box1{
	width:350px;
	height:30px;
  	padding:108px 0 0 136px;;
}
#box1 span{
	color:#ccc;
	font-size:14px;
	font-weight:bold;
}
#box1 input{
	height:18px;
	border:none;
	text-align:center;
	font-weight:bold;
	color:#666;
	/*这里直接background:none;就行了 不切图了 设置opacity不行 设置到透明字也透明了。*/
	background:none;         
}
#input1{
	width:75px;
}
#input2{
	width:46px;
	margin-left:10px;
}
#input3{
	width:46px;
	margin-left:2px;
}
#box2{
	height:150px;
	width:150px;
	background:url(img/btn_hover.jpg);
	margin:18px 0 0 235px;
	opacity:0;
}
#box3{
	height:24px;
	width:298px;
	color:#ccc;
	font-weight:bold;
	margin:30px 0 0 165px;
}
#box3 span{
	color:orange;
}
#box4{
	width:500px;
	height:80px;
 	margin:32px 0 0 48px;
}
#box4 p{
	height:60px;
	float:left;
	color:lightgreen;
	font-weight:bold;
	font-size:54px;
	text-align:right;
}
#day{
	width:120px;
}
#hour{
  width:60px;
  margin-left:44px;
}
#min{
  width:60px;
  margin-left:72px;
}
#sec{
  width:60px;
  margin-left:42px;
}
</pre>


</body> 
</html>    
      
     
     
     